<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:facelets="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head>
</h:head>
<h:body style="margin-left:20%;">
	<h:form id="form">
		<p:ajaxStatus style="width:16px;height:16px;float:right;">
			<f:facet name="start">
				<h:graphicImage value="/images/ajax-loader.gif" />
			</f:facet>

			<f:facet name="complete">
				<h:outputText value="" />
			</f:facet>
		</p:ajaxStatus>
		<p:tabView effect="height" effectDuration="normal">

			<p:tab title="Editar Grupos">
				<p:growl id="growl" />
				<p:layout style="width:900px;height:500px">
					<p:layoutUnit position="left" width="300" resizable="true"
						minWidth="150" maxWidth="400">
						<p:dataTable var="group" id="tableGroup"
							value="#{groupBean.allGroups}"
							style="width:30%;vertical-align:top;" paginator="false" rows="5"
							selection="#{groupBean.group}" selectionMode="single"
							update="form:roles form:growl" onRowEditUpdate="panel"
							rowSelectListener="#{groupBean.refreshRoles}">
							<p:column headerText="Seleccione el groupo a editar">
								<h:outputText value="#{group.name}" />
							</p:column>
						</p:dataTable>
					</p:layoutUnit>

					<p:layoutUnit position="center">
						<p:pickList id="roles" value="#{groupBean.roles}"
							style="float:left;width:40%;" var="role" itemLabel="#{role.name}"
							itemValue="#{role}" converter="roleConverter">
							<f:facet name="sourceCaption">Roles Disponibles</f:facet>
							<f:facet name="targetCaption">Roles Elegidos</f:facet>
						</p:pickList>
					</p:layoutUnit>
				</p:layout>
				<p:commandButton value="Guardar Grupos" ajax="false"
					actionListener="#{groupBean.save}" />
				<p:commandButton value="Volver" ajax="false"
					action="list_employees?faces-redirect=true" immediate="true" />
			</p:tab>
			<p:tab title="Editar Roles">
				<p:layout style="width:900px;height:500px">
					<p:layoutUnit position="left" width="300" resizable="true"
						minWidth="150" maxWidth="400">
						<p:dataTable var="role" id="tableRole"
							value="#{roleBean.allRoles}"
							style="width:30%;vertical-align:top;" paginator="false" rows="5"
							selection="#{roleBean.role}" selectionMode="single"
							update="form:actions form:growl" onRowEditUpdate="panel"
							rowSelectListener="#{roleBean.refreshActions}">
							<p:column headerText="Seleccione el rol a editar">
								<h:outputText value="#{role.name}" />
							</p:column>
						</p:dataTable>
					</p:layoutUnit>

					<p:layoutUnit position="center">
						<p:pickList id="actions" value="#{roleBean.actions}"
							style="float:left;width:40%;" var="action"
							itemLabel="#{action.name}" itemValue="#{action}"
							converter="actionConverter">
							<f:facet name="sourceCaption">Acciones Disponibles</f:facet>
							<f:facet name="targetCaption">Acciones Elegidas</f:facet>
						</p:pickList>
					</p:layoutUnit>
				</p:layout>
				<p:commandButton value="Guardar Roles" ajax="true" update="growl"
					actionListener="#{roleBean.save}" />
				<p:commandButton value="Volver" ajax="false"
					action="list_employees?faces-redirect=true" immediate="true" />
			</p:tab>
		</p:tabView>

	</h:form>
</h:body>
</html>